<template>
    <l-layout class="l-tab-page" :top="formHeight + 12">
        <template #top>
            <l-query :span="5" :labelWidth="110" :height.sync="formHeight" :items="formItems" :formData="formData"
                :loading="tableLoading" @search="handleSearch">
                <template #updateCycleCode>
                    <l-select :options="update_cycle_code_options" v-model="formData['updateCycleCode']"
                        @change="handleSearch" />
                </template>
                <template #regionCode>
                    <l-select :options="region_code_options" v-model="formData['regionCode']" @change="handleSearch" />
                </template>
                <template #landUseTypeCode>
                    <l-select :options="land_use_type_code_options" v-model="formData['landUseTypeCode']"
                        @change="handleSearch" />
                </template>
                <template #stageCode>
                    <l-select :options="stage_code_options" v-model="formData['stageCode']" @change="handleSearch" />
                </template>
                <template #industrialUpdateCode>
                    <l-select :options="industrialrenewalmethods_options" v-model="formData['industrialUpdateCode']"
                        @change="handleSearch" />
                </template>
                <template #name>
                    <el-input v-model="formData['name']" :placeholder="$t('请输入')" clearable @change="handleSearch" />
                </template>
                <template #muTaxQRange>
                    <l-number-range v-model="formData['muTaxQRange']" @change="handleSearch"></l-number-range>
                </template>
            </l-query>
        </template>
        <l-panel style="padding-top:0;">
            <template #toolLeft>
                <div class="l-panel--item">
                    <el-button type="primary" size="mini" icon="el-icon-plus" @click="addFirm">新增</el-button>
                </div>
                <div class="l-panel--item" style="margin-left: 5px;">
                    <l-excel-btns></l-excel-btns>
                </div>
                <!-- <div class="l-panel--item" style="margin-left: 5px;">
                    <el-button type="danger" size="mini" icon="el-icon-delete" @click="batchDelete"
                        :disabled="selection.length === 0">批量删除</el-button>
                </div> -->
            </template>
            <template #toolRight>
                <l-tool-btns :hasAdd="false" :hasTableSetting="true" @setting="lr_handleSettingTable">
                </l-tool-btns>
            </template>
            <l-table ref="mainTable" @select="handleSelect" @selectAll="handleSelectAll" :isMultiSelect="true"
                :loading="tableLoading" :columns="columns" :dataSource="tableData" :isPage="true" :pageTotal="tableTotal"
                :tablePage.sync="tableCurrentPage" @loadPageData="turnTablePage">
                <template #name="scope">
                    <a slot="reference" @click="handleDetails(0, scope.row)">{{
                        scope.row.name || "---"
                    }}</a>
                </template>
                <template v-for="(col, index) in lr_tableColumnsByToLabel(columns)" v-slot:[col.prop]="scope">
                    <l-value-to-label :value="scope.row[col.prop]" :type="col.dataType" :code="col.dataCode"
                        :valueKey="col.valueKey" :labelKey="col.labelKey" :options="col.options" :format="col.format"
                        :setting="col.setting" :key="index"></l-value-to-label>
                </template>
                <l-table-btns :btns="tableBtns" :filterBtns="filterBtns" @click="lr_handleTableBtnClick"
                    :btnNum="6"></l-table-btns>
            </l-table>
        </l-panel>
        <DialogForm ref="dialogForm" @refresh="loadTableData" />
        <ProgressDialogForm ref="progressDialogForm" @refresh="loadTableData" v-if="show" />
        <DetailDialogForm ref="detailDialogForm" />
    </l-layout>
</template>

<script>
import { tableColmuns, formColmuns, api, formData, dynApi } from "./columns";
import DialogForm from "./DialogForm";
import ProgressDialogForm from "./ProgressDialogForm";
import DetailDialogForm from "./DetailDialogForm/index.vue"
export default {
    components: {
        DialogForm,
        ProgressDialogForm,
        DetailDialogForm
    },
    data() {
        return {
            show: false, // 默认不加载进度组件，只有点击进度填报才加载
            // 控制dialogForm组件中的form表单是否禁用，默认禁用
            isDisabled: true,
            formHeight: 44,
            formData: formData,
            formItems: formColmuns,
            tableLoading: true,
            tableData: [],
            tableTotal: 0,
            tableCurrentPage: 1,
            tablePageSize: 50,
            columns: tableColmuns,
            tableBtns: [
                { prop: "Filling", label: "进度填报", width: 55 },
                { prop: "Edit", label: "编辑" },
                { prop: "Delete", label: "删除" },
            ],
            formVisible: false,
            formTitle: "",
            formEditRow: null,
            formEdit: false,
            selectFile: {},
            selection: []
        };
    },
    computed: {
        update_cycle_code_options() {
            return this.lr_dataItemOptions(this.lr_dataItem["update_cycle_code"]);
        },
        industrialrenewalmethods_options() {
            return this.lr_dataItemOptions(
                this.lr_dataItem["industrial_update_code"]
            );
        },
        land_use_type_code_options() {
            return this.lr_dataItemOptions(this.lr_dataItem["land_use_type_code"]);
        },
        stage_code_options() {
            return this.lr_dataItemOptions(this.lr_dataItem["stage_code"]);
        },
        region_code_options() {
            return this.lr_dataItemOptions(this.lr_dataItem["region_code"]);
        },
    },
    created() { },
    mounted() {
        this.lr_loadDataItem("update_cycle_code");
        this.lr_loadDataItem("industrial_update_code");
        this.lr_loadDataItem("land_use_type_code");
        this.lr_loadDataItem("stage_code");
        this.lr_loadDataItem("region_code");
        this.lr_loadDataItem("datasource_code");
        this.lr_loadDataItem("original_land_properties_code");
        this.lr_loadDataItem("industrial_update_code");
        this.lr_loadDataItem("role");
        this.lr_loadDataItem("industry");
        this.lr_loadDataItem("enterprisetype");
        this.lr_loadDataItem("three_update_circle");
        this.lr_loadDataItem("year");

        this.init();
    },
    methods: {
        batchDelete() {
            this.$confirm('是否确定批量删除选中数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleSelect(checked, row, rowIndex) {
            this.selection = this.$refs.mainTable.getSelected()
        },
        handleSelectAll(checked) {
            this.selection = this.$refs.mainTable.getSelected()
        },
        addFirm() {
            this.$refs.dialogForm.open({}, { isAdd: true });
            this.$nextTick(() => {
                // this.$refs.dialogForm.$refs.landCustomForm.copyFormData = {}
                // 置空tableData
                this.$refs.dialogForm.$refs.revenueTable.tableData = [];
                this.$refs.dialogForm.$refs.residentEnterpriseTable.tableData = [];
            })
        },
        handleDetails(index, row) {
            this.$refs.detailDialogForm.open(row)
            this.$nextTick(() => {
                // 这些模块可以使用这种写法
                this.$refs.detailDialogForm.$refs.settledEnterprise.init();
                this.$refs.detailDialogForm.$refs.industrialRenewal.init();
                this.$refs.detailDialogForm.$refs.firmUpdateFIle.init();
                this.$refs.detailDialogForm.$refs.updateProgress.init();
                this.$refs.detailDialogForm.$refs.lcInformation.init();
                this.$refs.detailDialogForm.$refs.taxInformation.init();
                this.$refs.detailDialogForm.$refs.energyCost.init();
                this.$refs.detailDialogForm.$refs.environmental.init();
                this.$refs.detailDialogForm.$refs.humanSocialInfo.init();
                // 国土 行政没填写
                this.$refs.detailDialogForm.$refs.technology.init();
                this.$refs.detailDialogForm.$refs.basicInformation.getPhotoList()
            })
        },
        async handleFilling(index, row) {
            this.show = true;
            this.$nextTick(() => {
                this.$refs.progressDialogForm.open(row);
            });
        },
        async handleEdit(index, row) {
            let res = await dynApi.get(row.id)
            if (res.data.code === 200) {
                this.$refs.dialogForm.open(res.data.data, { isEdit: true });
            }
            this.$nextTick(() => {
                this.$refs.dialogForm.$refs.revenueTable.init();
                this.$refs.dialogForm.$refs.residentEnterpriseTable.init();
            })
        },
        handleDelete(index, row) {
            this.$confirm(this.$t("是否删除该条数据?"), this.$t("提示"), {
                confirmButtonText: this.$t("确定"),
                cancelButtonText: this.$t("取消"),
                type: "warning",
            })
                .then(async () => {
                    await dynApi.remove(row.id);
                    this.$message({
                        type: "success",
                        message: this.$t("删除成功!"),
                    });
                    this.loadTableData();
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: this.$t("已取消删除!"),
                    });
                });
        },
        init() {
            this.loadTableData();
        },
        filterBtns(row, btns) {
            return btns;
        },
        handleSearch() {
            this.loadTableData();
        },
        turnTablePage({ rows }) {
            this.tablePageSize = rows;
            this.loadTableData(true);
        },
        async loadTableData(isNotFirst) {
            if (!isNotFirst) {
                this.tableCurrentPage = 1;
            }
            this.tableLoading = true;
            let formData = this.$deepClone(this.formData);
            formData.rows = this.tablePageSize;
            formData.page = this.tableCurrentPage;
            formData.sidx = "modifyTime";
            formData.sord = "DESC";
            let data = await this.$awaitWraper(api.getPage(formData));
            if (data != null) {
                this.tableData = data.rows;
                this.tableTotal = data.records;
            } else {
                this.tableTotal = 0;
                this.tableData = [];
            }
            this.tableLoading = false;
        },
        handleCloseForm() {
            this.$refs.form.resetForm();
            this.formVisible = false;
        },
    },
};
</script>
<style lang="scss" scoped>
::v-deep li.el-upload-list__item {
    // width: calc(100% - 85px);

    a.el-upload-list__item-name {
        // width: calc(100% - 20px);
    }
}
</style>
